<template>
  <header class="head">
    <div>{{data.detail}}</div>
    <div class="head-right">
      <el-dropdown trigger="click" @command='clickMy'>
        <span class="el-dropdown-link">
          <i class="el-icon-s-custom"></i>
          我的
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command='1'>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <dropdown trigger="click" title="皮肤" :listData='data.themeData' @clickDropDown='clickTheme'>
      </dropdown>
      <el-dropdown trigger="click" @command='clickLanguage'>
        <span class="el-dropdown-link">
          {{data.language}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command='item' v-for="item in data.languageData" :key="item">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>
<script lang="ts">
import { loginOut } from '@/http/api';
import { useStore } from 'vuex';
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { getLocale, languageData } from '@/utils/globalTools';
import { useI18n } from 'vue-i18n';
import dropdown from '@/components/comment/dropdown.vue'
interface Datas {
  language: string,
  languageData: string[],
  themeData: any[],
  detail: any
}
export default defineComponent({
  components: {
    dropdown
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const { locale } = useI18n()
    const data = reactive<Datas>({
      language: store.getters.getLanguage,
      languageData: languageData,
      themeData: [
        {
          id: 1,
          name: '深色'
        },
        {
          id: 2,
          name: '浅色'
        },
      ],
      detail: store.getters.userDetail
    })
    // 切换我的
    const clickMy = (val: any):void => {
      switch (val) {
        case 1:
          loginOut().then(() => {
            store.commit('OUT_LOGIN')
            router.push({path: '/login'})
          })
          break;
        default:
          break;
      }
    }
    // 切换皮肤
    const clickTheme = (val: any): void => {
      console.log(val);
    }
    // 切换语言
    const clickLanguage = (val: any): void => {
      store.commit('SET_LANGUAGE', val)
      data.language = store.getters.getLanguage
      locale.value = getLocale();
    }
    return {
      data,
      clickMy,
      clickTheme,
      clickLanguage
    }
  }
})
</script>
<style lang="scss" scoped>
.head {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(90deg,#2ec7c9,#5ab1ef);
}
.head-right {
  display: flex;
}
</style>
